<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form v-model="listQuery" inline>
        <el-form-item label="">
          <el-select
            v-model="listQuery.category_id"
            size="small"
            default-first-option
            style="width: 200px"
            placeholder="分类能耗"
            clearable
            @change="change"
          >
            <el-option
              v-for="(item, index) in joinArr"
              :key="index"
              :label="item.name"
              :value="item.category_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="listQuery.title"
            size="small"
            style="width: 200px"
            class="filter-item"
            placeholder="名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            查询
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="edit"
            @click="showCreate"
          >
            添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="box-container">
      <div class="chart-box">
        <div class="title-content">同比</div>
        <div class="chart">
          <chart
            v-if="chartOneData"
            :option="chartOneOption"
            style="width: 95%;"
          />
          <!-- <i class="el-icon-download" style="color: #fff;" /> -->
        </div>
      </div>
      <div class="chart-box">
        <div class="title-content">环比</div>
        <div class="chart">
          <chart
            v-if="chartThreeData"
            :option="chartThreeOption"
            style="width: 95%;"
          />
          <!-- <i class="el-icon-download" style="color: #fff;" /> -->
        </div>
      </div>
      <div class="chart-box">
        <div class="title-content">年单位面积能耗</div>
        <div class="chart">
          <chart
            v-if="chartFourData"
            :option="chartFourOption"
            style="width: 95%;"
          />
          <!-- <i class="el-icon-download" style="color: #fff;" /> -->
        </div>
      </div>
      <div class="chart-box half">
        <div class="title-content">年定额消耗</div>
        <div class="chart">
          <chart
            v-if="chartTwoData"
            :option="chartTwoOption"
            style="width: 95%;"
          />
        </div>
      </div>
      <div class="chart-box half">
        <div class="title-content">分项排名</div>
        <div class="chart">
          <chart
            v-if="chartPieData"
            :option="chartPieOption"
            style="width: 95%;"
          />
        </div>
      </div>
      <div class="chart-box all">
        <div class="title-content">年逐日能耗柱图</div>
        <div class="chart">
          <chart
            v-if="chartYearData"
            :option="chartYearOption"
            style="width: 95%;"
          />
        </div>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form
        class="small-space"
        :model="temp"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="位置" required>
          <el-select
            v-model="temp.category_id"
            size="small"
            default-first-option
            style="width: 180px"
            placeholder="所属位置"
            clearable
          >
            <el-option
              v-for="(item, index) in joinArr"
              :key="index"
              :label="item.name"
              :value="item.category_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名称" required>
          <el-input v-model="temp.title" size="small" width="100px" />
        </el-form-item>

        <el-form-item label="跳转URL">
          <el-input
            v-model="temp.link_url"
            size="small"
            width="300"
            placeholder="例如：https://www.baidu.com"
          />
        </el-form-item>

        <el-form-item label="banner图" required>
          <el-upload
            class="avatar-uploader"
            :action="uploadPath"
            :headers="header"
            :show-file-list="false"
            :on-success="handleImageSuccess"
          >
            <img
              v-if="temp.image_path"
              :src="temp.image_path"
              style="width: 200px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="temp.sort" size="small" />
          <el-tag type="warning">
            说明：正序排列，前台页面显示顺序由小到大显示</el-tag
          >
        </el-form-item>
        <el-alert
          :closable="false"
          title="温馨提示：图片尽量压缩后上传，尽量不超过1M"
          type="warning"
        />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          type="primary"
          @click="create"
          >确 定</el-button
        >
        <el-button v-else type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  List,
  Save,
  Del,
  Status,
  Sort,
  Ct_List,
  Ct_Save,
  Ct_Del,
  Ct_Status,
  Ct_Sort
} from "@/api/banner";
import { getToken } from "@/utils/auth";
import { uploadPath } from "@/utils/common";
import chart from "@/components/Echarts/chart";
const colors = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc"
];

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  components: {
    chart
  },
  data() {
    return {
      list: null,
      joinArr: [{ name: "水" }, { name: "电" }, { name: "气" }, { name: "热" }],
      changeIndex: -1,
      pagination: {},
      dialogFormVisible: false,
      temp: {
        title: "",
        link_url: "",
        image_path: "",
        sort: 0
      },
      listQuery: {
        page: 1,
        limit: 10,
        title: "",
        category_id: null
      },
      uploadPath: uploadPath,
      dialogStatus: null,
      dialogTitle: "",
      header: {
        Authorization: getToken()
      },
      chartOne: {},
      chartThree: {},
      chartOneOption: {},
      chartTwoOption: {},
      chartThreeOption: {},
      chartFourOption: {},
      chartYearOption: {},
      chartAreaOption: {},
      chartPieOption: {},
      chartOneData: false,
      chartTwoData: false,
      chartThreeData: false,
      chartFourData: false,
      chartYearData: false,
      chartAreaData: false,
      chartPieData: false,
      treeData: [
        {
          label: "办公建筑6幢",
          children: [
            {
              label: "二楼",
              children: [
                {
                  label: "201"
                }
              ]
            }
          ]
        },
        {
          label: "办公建筑8幢",
          children: [
            {
              label: "二楼",
              children: [
                {
                  label: "211"
                }
              ]
            },
            {
              label: "三楼",
              children: [
                {
                  label: "306"
                }
              ]
            }
          ]
        },
        {
          label: "办公建筑9幢",
          children: [
            {
              label: "一楼",
              children: [
                {
                  label: "109"
                }
              ]
            },
            {
              label: "二楼",
              children: [
                {
                  label: "209"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  created() {
    this.getList();
    // this.getCtList(),
    this.getLineCount();
    this.getPieCount();
    this.getLineTwo();
    this.getBar();
    this.getBarCount1();
    this.getYearBar();
    this.getAreaBar();
  },

  methods: {
    getList() {
      this.listLoading = true;
      List(this.listQuery).then(response => {
        var data = response.data;
        this.list = data.data;
        this.pagination = data;
        // 图片相对路径处理
        // this.list.forEach(item=>{
        //  item.image_path=process.env.VUE_APP_BASE_PIC +  item.image_path

        // })

        // 图片放大处理，声明一个数组，遍历一遍
        // this.list.forEach(e => {
        //   e.imglist=[]
        //   e.imglist.push(e.image_path)
        // });
      });
      this.listLoading = false;
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },

    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    change(val) {
      this.$set(this.listQuery, "category_idC", null);

      List({ category_id: val }).then(response => {
        var data = response.data;
      });
    },
    showCreate() {
      this.temp = {
        category_id: null,
        title: "",
        link_url: "",
        image_path: "",
        sort: 0
      };
      this.dialogTitle = "添加";
      this.dialogStatus = "create";
      (this.dialogTitle = "添加"), (this.dialogFormVisible = true);
    },
    handleImageSuccess(res, file) {
      if (res.code === 0) {
        this.temp.image_path = res.data.filepath;
        // 图片相对路径处理
        // this.temp.image_path=process.env.VUE_APP_BASE_PIC +  this.temp.image_path
        this.temp.image_path = this.temp.image_path;
        // uploadPath = uploadPath.this.temp.image_path;

        this.$message.success("上传成功！");
      } else {
        this.$message.error(res.msg);
      }
    },
    update() {
      Save(this.temp).then(response => {
        if (response.code === 0) {
          this.$message({
            message: response.msg,
            type: "success"
          });
          this.dialogFormVisible = false;
          // this.fetchSetting()
          this.getList();
        } else {
          this.$message({
            message: response.msg,
            type: "error"
          });
        }
      });
    },
    // 绘制图表1
    getLineCount() {
      var SCCounts = {
        // title: {
        //   text: '本月访问趋势',
        //   x: 'center'
        //   // y: '35%',
        //   // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        // },
        // color: colorList,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
        legend: {
          data: ["水", "电", "气", "热"],
          textStyle: {
            color: "#000"
          }
        },
        textStyle: {
          color: "#000"
        },
        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: true,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          name: "单位：%",
          type: "value",
          nameTextStyle: {
            color: "#000"
          }
        },
        series: [
          {
            name: "水",
            data: [20, 22, 11, 34, 12, 13, 13, 11, 14, 12, 13, 13],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "电",
            data: [10, 13, 19, 19, 10, 12, 12, 13, 19, 9, 12, 12],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "气",
            data: [8, 3, 9, 9, 1, 10, 2, 9, 9, 1, 10, 2],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "热",
            data: [7, 8, 4, 4, 5, 6, 7, 8, 4, 4, 5, 6],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          }
        ]
      };
      this.chartOneOption = SCCounts;
      this.chartOneData = true;

      this.chartThreeOption = SCCounts;
      this.chartThreeData = true;

      // var myChart = this.$echarts.init(this.$refs.SUMEchart)
      // SCCounts && myChart.setOption(SCCounts)
    },
    // 绘制饼图
    getBarCount1() {
      var SCCounts = {
        color: colors,
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["水", "电", "气", "热"],
          textStyle: {
            color: "#000"
          }
        },
        textStyle: {
          color: "#000"
        },
        grid: {
          left: 30,
          top: 60,
          bottom: 30,
          right: 10
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        // toolbox: {
        //   show: true,
        //   orient: "vertical",
        //   left: "right",
        //   top: "center",
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar", "stack"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            // name: "日期",
            type: "category",
            axisTick: { show: false },
            data: ["2020", "2021", "2022", "2023", "2024"]
          }
        ],
        yAxis: [
          {
            name: "单位：%",
            type: "value"
          }
        ],
        series: [
          {
            name: "水",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series"
            },
            data: [98, 99, 102, 105, 90]
          },
          {
            name: "电",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: [94, 80, 90, 98, 102]
          },
          {
            name: "气",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: [95, 80, 85, 94, 90]
          },
          {
            name: "热",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: [98, 77, 101, 99, 85]
          }
        ]
      };
      this.chartTwoOption = SCCounts;
      this.chartTwoData = true;
    },
    // 绘制饼图
    getPieCount() {
      var SCCounts = {
        // title: {
        //   text: '本月访问趋势',
        //   x: 'center'
        //   // y: '35%',
        //   // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        // },
        // color: colorList,
        tooltip: {
          trigger: "item"
        },
        legend: {
          left: "center",
          textStyle: {
            color: "#000"
          }
        },
        series: [
          {
            name: "水能耗",
            type: "pie",
            top: "10%",
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              // position: 'center',
              color: "#000"
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: "一幢" },
              { value: 735, name: "二幢" },
              { value: 580, name: "三幢" },
              { value: 484, name: "四幢" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.chartPieOption = SCCounts;
      this.chartPieData = true;
    },
    // 绘制对比图
    getLineTwo() {
      var SCCounts = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
        legend: {
          data: ["水", "电", "气", "热"],
          textStyle: {
            color: "#000"
          }
        },
        textStyle: {
          color: "#000"
        },
        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: true,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          name: "单位：%",
          type: "value",
          nameTextStyle: {
            color: "#000"
          }
        },
        series: [
          {
            name: "水",
            data: [20, 22, 11, 23, 12, 13, 13, 11, 14, 12, 13, 13],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "电",
            data: [10, 13, 19, 19, 10, 12, 12, 13, 19, 9, 12, 12],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "气",
            data: [8, 3, 9, 9, 1, 10, 2, 9, 9, 1, 10, 2],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "热",
            data: [7, 8, 4, 4, 5, 6, 7, 8, 4, 4, 5, 6],
            type: "line",
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          }
        ]
      };
      this.chartThreeOption = SCCounts;
      this.chartThreeData = true;
    },
    getBar() {
      var SCCounts = {
        color: colors,
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["水", "电", "气", "热"],
          textStyle: {
            color: "#000"
          }
        },
        textStyle: {
          color: "#000"
        },
        grid: {
          top: 50,
          bottom: 30,
          right: 50
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        // toolbox: {
        //   show: true,
        //   orient: "vertical",
        //   left: "right",
        //   top: "center",
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar", "stack"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            // name: "日期",
            type: "category",
            axisTick: { show: false },
            data: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"]
          }
        ],
        yAxis: [
          {
            name: "单位：L",
            type: "value"
          },
          {
            type: "value",
            name: "单位：kwh",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: [
          {
            name: "水",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series"
            },
            data: [320, 332, 301, 334, 390, 233, 345]
          },
          {
            name: "电",
            type: "bar",
            yAxisIndex: 1,
            emphasis: {
              focus: "series"
            },
            data: [1220, 1182, 1191, 1234, 1290, 1232, 1222]
          },
          {
            name: "气",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: [150, 232, 201, 154, 190, 189, 199]
          },
          {
            name: "热",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: [98, 77, 101, 99, 40, 24, 56]
          }
        ]
      };
      this.chartFourOption = SCCounts;
      this.chartFourData = true;
    },
    getYearBar() {
      let base = +new Date(2023, 1, 1);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 400; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      var SCCounts = {
        color: colors,
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["水", "电", "气", "热"],
          textStyle: {
            color: "#000"
          }
        },
        textStyle: {
          color: "#000"
        },
        grid: {
          top: 50,
          bottom: 30,
          left: 30,
          right: 50
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        // toolbox: {
        //   show: true,
        //   orient: "vertical",
        //   left: "right",
        //   top: "center",
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar", "stack"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            // name: "日期",
            type: "category",
            axisTick: { show: false },
            boundaryGap: false,
            data: date
            // [
            //   "2024-01-01",
            //   "2024-01-01",
            //   "2024-01-01",
            //   "2024-01-01",
            //   "2024-01-01",
            //   "2024-01-01",
            //   "2024-01-01"
            // ]
          }
        ],
        yAxis: [
          {
            name: "单位：L",
            type: "value",
            boundaryGap: [0, "100%"]
          },
          {
            type: "value",
            name: "单位：kwh",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            boundaryGap: [0, "100%"]
          }
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: "水",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series"
            },
            data: data //[320, 332, 301, 334, 390, 233, 345]
          },
          {
            name: "电",
            type: "bar",
            yAxisIndex: 1,
            emphasis: {
              focus: "series"
            },
            data: data //[1220, 1182, 1191, 1234, 1290, 1232, 1222]
          },
          {
            name: "气",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: data //[150, 232, 201, 154, 190, 189, 199]
          },
          {
            name: "热",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: data //[98, 77, 101, 99, 40, 24, 56]
          }
        ]
      };
      this.chartYearOption = SCCounts;
      this.chartYearData = true;
    },
    getAreaBar() {
      var SCCounts = {
        title: {
          text: "Disk Usage",
          left: "center"
        },
        tooltip: {
          formatter: function(info) {
            var value = info.value;
            var treePathInfo = info.treePathInfo;
            var treePath = [];
            for (var i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name);
            }
            return [
              '<div class="tooltip-title">' +
                formatUtil.encodeHTML(treePath.join("/")) +
                "</div>",
              "Disk Usage: " + formatUtil.addCommas(value) + " KB"
            ].join("");
          }
        },
        series: [
          {
            name: "Disk Usage",
            type: "treemap",
            visibleMin: 300,
            label: {
              show: true,
              formatter: "{b}"
            },
            itemStyle: {
              borderColor: "#fff"
            },
            levels: getLevelOption(),
            data: diskData
          }
        ]
      };
      this.chartAreaOption = SCCounts;
      this.chartAreaData = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.alert-container {
  //margin:0px;
}

.item-content {
  display: flex;
  flex-wrap: wrap;
  //   height: calc(100% - 50px);
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;

  .left {
    width: 20%;

    .el-tree {
      background: none;
      color: #000;
    }

    ::v-deep.el-tree-node__content {
      &:hover {
        background-color: #7ba0ff30;
      }
    }

    ::v-deep.el-tree-node.is-current > .el-tree-node__content {
      background-color: #7ba0ff30 !important;
      color: #0274ff;
    }

    .el-tree-node .is-expanded .is-focusable {
      background: none;
    }
  }

  .right {
    width: 80%;
    position: relative;

    img {
      width: 100%;
      object-fit: cover;
      // max-width: 100%;
      /* 最大宽度为父容器宽度的100% */
      // height: auto;
      /* 高度自动调整以保持图片比例 */
      // display: block;
      /* 使图片表现得像块级元素 */
    }

    span {
      color: #000;
      z-index: 999;
    }

    .wendu {
      position: absolute;
      top: 90%;
      left: 10%;
    }
  }
}

.box-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0px 0;
  justify-content: space-between;

  .chart-box {
    width: 49.7%;
    height: 350px;
    background-color: #fff;
    margin-bottom: 10px;

    .title-content {
      display: flex;
      justify-content: space-between;
      color: #000;
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      background: #dfdfdf;
      align-items: center;
    }

    .chart {
      display: flex;
      flex-wrap: wrap;
      height: calc(100% - 50px);
      padding: 10px;
    }
  }

  .half {
    width: 24.7%;
  }
  .all {
    width: 100%;
  }
}
</style>
